<template>
  <div class="app-main-container">
    <div class="df" style="height: 100%;">
      <div class="w400 sell_left">
        <el-input
          v-model="mealName"
          placeholder="请输入套餐名称"
          class="input-with-select bottom-speace-style"
          @keyup.enter.native="searchMeals"
        >
          <el-button slot="append" icon="el-icon-search" @click="searchMeals" />
        </el-input>
        <div class="sell_wrap">
          <div class="mt10">
            <div
              v-for="(item, index) in saleTickets"
              :key="index"
              class="card-style"
              :class="item.isSelect?'select-style':'normal-style'"
              @click="selectTick(index)"
            >
              <div class="img-div">
                <img v-if="item.imgurl" :src="item.imgurl" alt="">
                <img v-else src="@/assets/images/default_meal_img.jpg" alt="">
              </div>
              <div class="combo_card_right">
                <div class="card-name">{{ item.name }}</div>
                <div v-if="item.mealsType === '0'" class="card_type">套餐类型：门票次数卡</div>
                <div v-if="item.mealsType === '1'" class="card_type">套餐类型：门票期限卡</div>
                <div v-if="item.mealsType === '2'" class="card_type">套餐类型：预定次卡</div>
                <div v-if="item.validityType == '1'" class="time-style">{{ "有效期：" + item.indate + "天" }}</div>
                <div v-if="item.validityType == '0'" class="time-style">{{ "固定日期：" + item.validityStartTime + " - " + item.validityEndTime }}</div>
                <div class="specific">
                  <div class="card-first-price secondColor">￥{{ item.price }}</div>
                  <div class="num-module-style">
                    <div class="sale-style">
                      <span class="num-title-style">已售：</span>
                      <span>{{ item.circulationDay - item.surplusDay }}</span>
                    </div>
                    <span class="ml10 mr10 placeholder6"> | </span>
                    <div class="surplus-style">
                      <span class="num-title-style">剩余：</span>
                      <span>{{ item.surplusDay }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <Pagination
            :integrated="false"
            :page="salePagination.page"
            :total="saleTotal"
            :page-size="salePagination.rows"
            @current-change="salePageChange"
          />
        </div>
      </div>
      <div class="separator" />
      <div class="flex1">
        <div class="member_wrap">
          <div class="df">
            <MemberSearch ref="MemberSearchRef" class="flex1" @clear="memberClear" @select="memberSelect" />
            <!-- <el-button class="ml10" type="primary" @click="memberClear">散客</el-button> -->
          </div>
          <div class="df mt20 mb20">
            <span class="flex1">姓名：{{ memberInfo.nickName || '-' }}</span>
            <span class="flex1">手机号：{{ memberInfo.phone || '-' }}</span>
            <span class="flex1">会员等级：{{ memberInfo.cardName || '-' }}</span>
            <span class="flex1">充值余额：{{ memberInfo.rechargeMoney || '0.00' }}</span>
            <span class="flex1">赠送余额：{{ memberInfo.giveMoney || '0.00' }}</span>
          </div>
        </div>
        <div class="tables">
          <el-table
            :data="selectedMessage"
            border
            fit
            :header-row-class-name="'table-header'"
            class="doumee-element-table"
          >
            <!-- <el-table-column align="center" label="序号" type="index" min-width="60" show-overflow-tooltip /> -->
            <el-table-column align="center" label="套餐" prop="name" min-width="100" show-overflow-tooltip />
            <!-- <el-table-column align="center" label="类型" prop="name" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="count-style">{{ scope.row.mealsType == '0' ? '门票次数卡' : scope.row.mealsType == '1'? '门票期限卡':'预定次卡' }}</span>
            </template>
          </el-table-column> -->
            <el-table-column align="center" label="次数" prop="nums" min-width="40" show-overflow-tooltip />
            <el-table-column align="center" label="赠送次数" width="120">
              <template slot-scope="scope">
                <el-input-number v-if="scope.row.mealsType !== '1'" v-model="scope.row.giveNums" :disabled="!zsnum" size="small" :step="1" step-strictly :min="0" :max="9999" label="赠送次数" style="width: 100%" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="单价" prop="price" min-width="50" show-overflow-tooltip />
            <!-- <el-table-column align="center" label="有效期" prop="indate" min-width="60" show-overflow-tooltip /> -->
            <el-table-column align="center" label="数量" width="120">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.num" size="small" step-strictly :max="scope.row.surplusDay" :step="1" :min="1" label="数量" style="width: 100%" />
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" label="折扣" prop="price" min-width="40" show-overflow-tooltip>
            <template>
              {{ memberInfo.discoun }}折
            </template>
          </el-table-column> -->
            <el-table-column align="center" label="小计" prop="price" min-width="50" show-overflow-tooltip />
            <el-table-column align="center" label="操作" min-width="50" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button v-preventReClick type="text" class="secondColor" @click="toDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="selectedMessage.length" class="final_wrap">
          <div class="price_wrap">
            <div class="sum-style">
              <span class="sum-title">合计：</span>
              <span class="sum-value secondColor">{{ totalMoney }}</span>
            </div>
            <!-- <div class="sum-style">
              <span class="sum-title">折后金额：</span>
              <span class="sum-value secondColor">{{ totalMoney }}</span>
            </div>
            <div class="sum-style">
              <span class="sum-title">优惠金额：</span>
              <span class="sum-value secondColor">{{ totalMoney }}</span>
            </div> -->
          </div>
          <div class="sub_order">
            <el-input v-model="remark" placeholder="请输入订单备注" />
            <el-button class="ml20" type="primary" @click="createOrder">订单结算</el-button>
            <el-button @click="clearOrder">清空</el-button>
          </div>
        </div>
      </div>
    </div>
    <orderDialog ref="child" @orderSuccess="getList" />
    <comboConfirm ref="comboConfirm" @confirm="createOrder" />
  </div>
</template>

<script>
import { mealList, configList } from '@/api'
import { parseTime } from '@/utils'
import orderDialog from '@/components/order'
import comboConfirm from '@/components/ComboConfirm'
import Pagination from '@/components/paginations'
import MemberSearch from '@/components/MemberSearch'
export default {
  name: 'ComboSell',
  components: {
    orderDialog,
    comboConfirm,
    Pagination,
    MemberSearch
  },
  data() {
    return {
      mealName: '',
      cardNum: '',
      dialogMessageTableVisible: false,
      dialogTableVisible: false,
      showMessage: false,
      cardMessage: {},
      date: null,
      zsnum: false,
      saleTickets: [],
      salePagination: {
        page: 1,
        rows: 20
      },
      saleTotal: 0,
      salePage: 1,
      selectedMessage: [],
      project: {
        projectList: []
      },
      param: {
        date: parseTime(new Date())
      },
      remark: '',
      memberInfo: {}
    }
  },
  computed: {
    // swiper() {
    //   return this.$refs.mySwiper.$swiper
    // },
    totalMoney() {
      let money = 0.0
      this.selectedMessage.forEach(item => {
        money += item.price * item.num
      })
      return parseFloat(money).toFixed(2)
    }
  },
  created() {
    this.getMeals()
    this.getDefalutConfig()
  },
  methods: {
    getDefalutConfig() {
      configList({ param: { type: '6' }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          const list = res.recordList
          const objb = list.find(item => item.code === 'PRESENT_NUM_CONFIG')
          if (objb && objb.name) {
            this.zsnum = true
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    memberSelect(item) {
      this.memberInfo = item
    },
    memberClear() {
      this.$refs.MemberSearchRef.clearSearch()
      this.memberInfo = {}
    },
    getList() {
      this.memberClear()
      this.clearOrder()
      this.$router.push({ name: 'ComboOrderList' })
    },
    mealTitle(item) {
      let titleStr = ''
      if (item.mealsType === '0') {
        titleStr = '【门票次数卡】' + item.name
      } else if (item.mealsType === '1') {
        titleStr = '【门票期限卡】' + item.name
      } else {
        titleStr = '【预定次卡】' + item.name
      }
      return titleStr.length > 30 ? titleStr.slice(0, 27) + '...' : titleStr
    },
    searchMeals() {
      // if (!this.mealName) {
      //   this.$message.error('请输入套餐名称')
      //   return
      // }
      this.getMeals()
    },
    mealType(item) {
      let typeStr = ''
      if (item.mealsType === '0') {
        typeStr = '次数：' + item.nums
      } else {
        typeStr = '有效期：' + item.indate
      }
      return typeStr
    },
    getMeals() {
      mealList({
        param: {
          name: this.mealName,
          venueId: sessionStorage.getItem('venueId')
        },
        pagination: this.salePagination
      })
        .then(res => {
          if (res.errorCode !== '000000') return
          this.saleTickets = res.recordList
          this.saleTotal = res.totalCount || 0
          this.saleTickets.forEach(item => {
            item.isSelect = false
            this.selectedMessage.forEach(select => {
              if (select.id === item.id) {
                item.isSelect = true
              }
            })
          })
        })
        .catch(err => {
          console.log(err)
        })
    },
    salePageChange(val) {
      this.salePagination.page = val
      this.getMeals()
    },
    selectTick(index) {
      const item = this.saleTickets[index]
      if (item.surplusDay < 1) {
        return this.$message.warning('该库存不足')
      }
      if (item.isSelect) {
        const index = this.selectedMessage.findIndex(i => i.id === item.id)
        this.selectedMessage.splice(index, 1)
      } else {
        this.selectedMessage.push({
          id: item.id,
          mealsType: item.mealsType,
          nums: item.nums,
          giveNums: item.giveNums || 0,
          indate: item.indate,
          name: item.name,
          price: item.price,
          num: 1,
          surplusDay: item.surplusDay
        })
      }
      this.saleTickets[index].isSelect = !this.saleTickets[index].isSelect
    },
    clearOrder() {
      this.selectedMessage = []
      this.saleTickets.forEach(item => {
        item.isSelect = false
      })
    },
    toDelete(index) {
      this.saleTickets.forEach(item => {
        if (item.id === this.selectedMessage[index].id) {
          item.isSelect = false
        }
      })
      this.selectedMessage.splice(index, 1)
    },
    totalAction() {
      // const { remark, memberInfo } = this
      this.$refs.comboConfirm.open(this.selectedMessage, this.totalMoney)
    },
    createOrder(data) {
      const { selectedMessage, remark, memberInfo } = this
      if (!memberInfo.id) {
        return this.$message.warning('请先选择会员再结算')
      }
      const config = { selectedMessage, remark, memberInfo: memberInfo }
      this.$refs.child.continuePay(config, 'combo', data.cardMessage)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.app-main-container {
  height: calc(100% - 40px);
}
.separator{
  margin: 0 20px;
  width: 1px;
  height: 100%;
  background-color: #DFE2E8;
}
.sell_left{
  height: 100%;
  .sell_wrap{
    height: calc(100% - 100px);
    overflow: auto;
  }
}

.tables {
  height: calc(100% - 200px);
  overflow: auto;
}
.card-style {
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  .img-div {
    width: 60px;
    height: 36px;
    margin-right: 10px;
    display: flex;
    img {
      width: 100%;
      border-radius: 2px;
    }
  }
  .combo_card_right{
    flex: 1;
    .card-name {
      margin-bottom: 10px;
      line-height: 14px;
    }
    .card_type{
      margin-bottom: 10px;
      font-size: 12px;
      line-height: 12px;
      color: #666666;
    }
    .time-style {
      color: #666666;
      margin-bottom: 12px;
      font-size: 12px;
      line-height: 12px;
    }
    .specific{
      display: flex;
      line-height: 14px;
      justify-content: space-between;
      .card-first-price {
        font-size: 14px;
      }
      .num-module-style {
        font-size: 12px;
        .sale-style {
          float: left;
        }
        .surplus-style {
          float: right;
        }
        .num-title-style {
          color: #666666;
        }
      }
    }
  }
}
.select-style {
  border: solid 1px $primaryColor;
}
.normal-style {
  border: solid 1px #d8d8d8;
}

.final_wrap {
  background: #F7F7F7;
  border-radius: 2px;
  padding: 20px;
  .price_wrap{
    display: flex;
    margin-bottom: 20px;
    .sum-style {
      font-size: 16px;
      margin-right: 75px;
      .sum-title {
        color: #222;
      }
      .sum-value {
        font-size: 17px;
        font-weight: 700;
      }
    }
  }
  .sub_order{
    display: flex;
  }
}
.count-style {
  margin-left: 5px;
  margin-right: 5px;
}
.bottom-speace-style {
  margin-bottom: 10px;
}
</style>
